<template>
    <div class="com-cnt">
        <ul class="vip-items" id="vipItems">
            <li class="item border-bottom">
                <i class="icon iconfont icon-Raidobox-weixuan"></i>
                <div class="cont">
                    <div class="pic" style="backgroundImage:url(http://d.ifengimg.com/mw978_mh598/p2.ifengimg.com/a/2018_25/1424baf10c06fa6_size59_w628_h791.jpg);"></div>
                    <div class="info">
                        <span class="title">ge</span>
                        <span class="txt">gg</span>
                        <span class="num">geg</span>
                    </div>
                </div>
            </li>
            <li class="item border-bottom">
                <i class="icon iconfont icon-Raidobox-weixuan"></i>
                <div class="cont">
                    <div class="pic" style="backgroundImage:url(http://d.ifengimg.com/mw978_mh598/p2.ifengimg.com/a/2018_25/1424baf10c06fa6_size59_w628_h791.jpg);"></div>
                    <div class="info">
                        <span class="title">ge</span>
                        <span class="txt">gg</span>
                        <span class="num">geg</span>
                    </div>
                </div>
            </li>
        </ul>
        <div id="gotoDone" class="btn">立即办理</div>
    </div>
</template>

<script>
    export default {
        name: "vipPage"
    }
</script>

<style lang="css" scoped>
.com-cnt{
    width:100%;
    height:auto;
    overflow: hidden;
}
.vip-items{
    width:100%;
    height:auto;
    overflow: hidden;
}
.item{
    width:100%;
    height: auto;
    float: left;
    box-sizing:border-box;
    padding:10px 10px 10px 40px;
    position: relative;
}
.icon{
    position: absolute;
    left:10px;
    top:50%;
    font-size:18px;
    color:#ddd;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transition: all 0.3s;
}
.cur .icon{
    color:#f8a120;
}
.cont{
    width:100%;
    height:auto;
    display:flex;
    overflow: hidden;
}
.pic{
    width:110px;
    height:90px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    margin-right:10px;
    overflow: hidden;
}
.info{
    height:100%;
    flex:1;
    font-size:14px;
    color:#333;
}
.info span{
    display:block;
    width:100%;
    height:30px;
    line-height:30px;
    float:left;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.btn{
    width:100%;
    height:45px;
    line-height:45px;
    font-size:16px;
    color:#333;
    text-align:center;
    background-color:#ddd;
    margin-top:10px;
}
</style>